<template>
  <view class="work-container">
    <!-- 轮播图区域 -->
    <view class="banner-container">
      <uni-swiper-dot class="uni-swiper-dot-box" :info="data" :current="current" field="content">
        <swiper class="swiper-box" :current="swiperDotIndex" @change="changeSwiper">
          <swiper-item v-for="(item, index) in data" :key="index">
            <view class="swiper-item" @click="clickBannerItem(item)">
              <image :src="item.image" mode="aspectFill" :draggable="false" />
            </view>
          </swiper-item>
        </swiper>
      </uni-swiper-dot>
    </view>

    <!-- 功能模块区域 -->
    <view class="function-container">
      <uni-section title="功能模块" type="line"></uni-section>
      <view class="grid-body">
        <uni-grid :column="4" :showBorder="false" @change="changeGrid">
          <!-- 移动下单 -->
          <uni-grid-item index="0">
            <view class="grid-item-box">
              <uni-icons type="pulldown" size="30" color="#1a73e8"></uni-icons>
              <text class="text">移动下单</text>
            </view>
          </uni-grid-item>
          <!-- 销售订单 -->
          <uni-grid-item index="1">
            <view class="grid-item-box">
              <uni-icons type="list" size="30" color="#1a73e8"></uni-icons>
              <text class="text">销售订单</text>
            </view>
          </uni-grid-item>
          <!-- 发货统计 -->
          <uni-grid-item index="2">
            <view class="grid-item-box">
              <uni-icons type="map-filled" size="30" color="#1a73e8"></uni-icons>
              <text class="text">发货统计</text>
            </view>
          </uni-grid-item>
          <!-- 收款单 -->
          <uni-grid-item index="3">
            <view class="grid-item-box">
              <uni-icons type="plusempty" size="30" color="#1a73e8"></uni-icons>
              <text class="text">收款单</text>
            </view>
          </uni-grid-item>
          <!-- 调货单 -->
          <uni-grid-item index="4">
            <view class="grid-item-box">
              <uni-icons type="tune" size="30" color="#1a73e8"></uni-icons>
              <text class="text">调货单</text>
            </view>
          </uni-grid-item>
          <!-- 退货单 -->
          <uni-grid-item index="5">
            <view class="grid-item-box">
              <uni-icons type="undo" size="30" color="#1a73e8"></uni-icons>
              <text class="text">退货单</text>
            </view>
          </uni-grid-item>
        </uni-grid>
      </view>
    </view>
  </view>
</template>


<script>
	export default {
		data() {
			return {
				current: 0,
				swiperDotIndex: 0,
				data: [{
					image: 'https://wxxcx.shanghaihulian.cn:86/prod-api/profile/upload/2025/09/13/1_20250913090844A001.png'
				}]
			}
		},
		methods: {
			clickBannerItem(item) {
				console.info(item)
			},
			changeSwiper(e) {
				this.current = e.detail.current
			},
			changeGrid(e) {
				console.log(e.detail.index)
				if (e.detail.index === 0) {
					uni.removeStorageSync("saveNote")
					uni.removeStorageSync("goodsList")
					uni.removeStorageSync("formData")
					uni.removeStorageSync("editOrderData")

					uni.navigateTo({
						url: "/pages/placeAnOrder/moveTheOrder?mode=add"
					})
				} else if (e.detail.index === 1) {
					uni.navigateTo({
						url: "/pages/saleOrder/index"
					})
				} else if (e.detail.index === 2) {
					uni.navigateTo({
						url: "/pages/rank/rank"
					})
				} else {
					uni.showToast({
					  title: '模块建设中~',
					  icon: 'none'
					});
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
/* #ifndef APP-NVUE */
page {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background-color: #f5f5f5;
  min-height: 100%;
  height: auto;
}

.view {
  font-size: 14px;
  line-height: inherit;
}

/* #endif */

.work-container {
  padding: 20rpx;
}

/* 轮播图容器 */
.banner-container {
  width: 100%;
  border-radius: 16rpx;
  overflow: hidden;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);
}

.swiper-box {
  height: 300rpx;
}

.swiper-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  height: 300rpx;
  line-height: 300rpx;
}

/* 功能模块容器 */
.function-container {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 20rpx;
  box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);
}

.grid-body {
  margin-top: 20rpx;
}

/* 网格项样式 */
.grid-item-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 15px 0;
  border-radius: 8rpx;
  transition: all 0.3s ease;
}

.grid-item-box:hover {
  background-color: #f0f0f0;
  transform: scale(1.02);
}

.text {
  text-align: center;
  font-size: 26rpx;
  margin-top: 10rpx;
  color: #333;
}

/* 响应式设计 */
@media screen and (max-width: 375px) {
  .grid-item-box {
    padding: 10px 0;
  }

  .text {
    font-size: 24rpx;
  }
}
</style>
